<template>
  <div class='position'>
    <div class='position_title'>
    	<img src='~assets/images/hold_2x.png'  class='hold_image'/>
    	自选相似K线	
    </div>
    <div>
      <div v-if='show === "loading"' class='loading'>
      	<img src='~assets/images/loading.png' class='loading-img'></img>
      	<div>正在同步自选，请稍等...</div>
      </div>
      <div v-else-if='show === "nodata"' class='nodata'>
    	  <img src='~assets/images/nodata_2x.png'/>
    	  <div class='text'>还没有自选哦，快去<a class='chooseStock' @click='addStock'>添加自选</a>吧！</div>
      </div>
      <div v-else-if='show === "error"' class='error'>
        <img src='~assets/images/error_2x.png'/>
    	  <div class='text' @click='tryAgain'>{{errMes}}</div>
      </div>
      <div v-else>
      	<div class='position_subtitle'>
          <div class='itemTitle'>股票名称</div>
           <div class='itemTitleNum'>相似股票数</div>
           <div class='itemTitleHis'>最相似股票</div>
        </div>
      	<div  v-for='(item,index) in myPosition'>
    	    <myPositionitem :item='item' :index='index'></myPositionitem>
        </div>
      </div>
     
    </div>
  </div>
</template>

<script>
import myPositionitem from './myPositionItem'
import { checkLogin } from '@/common/decorator'
export default{
  data () {
    return {
      myPositionaa: [
        {
          stockName: '鼎泰新材',
          stockCode: '601688',
          type: '自选',
          kLineNum: 21,
          chart: {
            up: 18,
            down: 5
          }
        },
        {
          stockName: '中国中车',
          stockCode: '601688',
          type: '自选',
          kLineNum: 223,
          chart: {
            up: 5,
            down: 3
          }
        },
        {
          stockName: '鼎泰新材',
          stockCode: '601688',
          type: '持仓',
          kLineNum: 228
        },
        {
          stockName: '中国中车',
          stockCode: '601688',
          type: '自选',
          kLineNum: 228
        },
        {
          stockName: '鼎泰新材',
          stockCode: '601688',
          type: '自选',
          kLineNum: 234
        },
        {
          stockName: '中国中车',
          stockCode: '601688',
          type: '自选',
          kLineNum: 22
        }
      ],
      positionLength: 5,
      showPosition: []
    }
  },
  components: {
    myPositionitem
  },
  mounted () {
    this.init()
  },
  props: {
    show: String,
    myPosition: Array,
    errMes: String
  },
  methods: {
    init () {
      // this.showPosition = this.myPosition.slice(0, 5)
    },
    tryAgain () {
      this.$emit('tryAgain')
    },
    @checkLogin
    addStock () {
      window.location.href = 'gtjayyz://jumpfunc?funid=30007&index=hq'
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.hold_image{
	width: 38px;
  vertical-align: middle;
  margin-right:10px;
}
.position{
  font-size:28px;
  padding: 10px 0 20px 0;
}
.position_title{
  padding:22px 28px 24px 30px;
  display: flex;
  justify-content: flex-start;
  align-items:center;
  border-bottom: solid 1px #eaeaea;
  color:#555555;
  font-size:30px;
}
.position_subtitle{
  display: flex;
  font-size:26px;
  line-height:60px;
  color: rgb(153,153,153);
  .itemTitle{
    flex:3;
    margin:17px 0 17px 30px;
    text-align: left;
  }
  .itemTitleNum{
  	text-align: left;
	  flex:2.5;
    margin:17px 0 17px 0;
  }
  .itemTitleHis{
  	text-align: right;
    flex:3;
    margin:17px 30px 17px 0
  }
}
.bold_line{
  background-color: #f0f0f0;
  height:10px;
  width:100%;
  border-top: solid 1px #eaeaea;
  border-bottom: solid 1px #eaeaea;
}
.nodata{
	img{
		width:230px;
		padding: 26px 0 0 0;
	}
	.text{
		font-size:30px;
		color:#999;
		padding:20px 0 30px 0;
	}
}
.error{
	img{
		width:130px;
		padding: 26px 0 0 0;
	}
	.text{
		font-size:24px;
		color:#999;
		padding:20px 0 30px 0;
	}
}
.loading{
	display:flex;
	font-size:30px;
	margin: 30px 0 15px 27%;
	color:#aaa;
	align-items: flex-end;
	img{
		width:40px;
		webkit-animation: Loading 1s linear 0s infinite;
    animation: Loading 1s linear 0s infinite;
	}
}
.chooseStock{
	color:#0099FF;
}
@-webkit-keyframes Loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}
</style>
